<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/css/style.css">
    <title>Document</title>
</head>

<body>
    <div style="width: 80%;margin-left: 10%;">
        <h2 id="demo">示例演示</h2>

        <p>当前年度倒计时</p>
        <div class="led1"></div>
        <p>Code:</p>
        <div class="highlight">
            <pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led1&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span> 
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;countdown&#39;</span><span class="p">,</span> 
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;ddd:hh:mm:ss&#39;</span><span class="p">,</span> 
    <span class="nx">hour_format</span><span class="o">:</span> <span class="mi">12</span><span class="p">,</span> 
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#fa0&#39;</span><span class="p">,</span> 
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#fafafa&#39;</span><span class="p">,</span> 
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> 
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> 
    <span class="nx">size</span><span class="o">:</span> <span class="mi">9</span> 
<span class="p">});</span> 
</code></pre>
        </div>


        <p>显示当前时间</p>

        <div class="led2"></div>

        <p>Code:</p>

        <div class="highlight">
            <pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led2&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span> 
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;time&#39;</span><span class="p">,</span> 
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;hh:mm&#39;</span><span class="p">,</span> 
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#ed1978&#39;</span><span class="p">,</span> 
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#ccc&#39;</span><span class="p">,</span> 
    <span class="nx">size</span><span class="o">:</span> <span class="mi">8</span><span class="p">,</span> 
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span> 
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">1</span> 
<span class="p">});</span> 
</code></pre>
        </div>


        <p>圣诞节倒计时 (days-hours-minutes-seconds)</p>

        <div class="led3"></div>

        <div class="highlight">
            <pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led3&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span> 
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;countdown&#39;</span><span class="p">,</span> 
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;ddd:hh:mm:ss&#39;</span><span class="p">,</span> 
    <span class="nx">count_to</span><span class="o">:</span> <span class="s1">&#39;2017:12:25&#39;</span><span class="p">,</span> 
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#ff0000&#39;</span><span class="p">,</span> 
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#fff&#39;</span><span class="p">,</span> 
    <span class="nx">size</span><span class="o">:</span> <span class="mi">8</span><span class="p">,</span> 
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">2</span> 
<span class="p">});</span> 
</code></pre>
        </div>


        <p>新年倒计时 (days-hours)</p>

        <div class="led4"></div>

        <div class="highlight">
            <pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led4&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span> 
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;countdown&#39;</span><span class="p">,</span> 
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;ddd:hh&#39;</span><span class="p">,</span> 
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#0000ff&#39;</span><span class="p">,</span> 
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#888&#39;</span><span class="p">,</span> 
    <span class="nx">size</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span> 
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> 
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">6</span> 
<span class="p">});</span> 
</code></pre>
        </div>


        <p>随机数字</p>

        <div class="led5"></div>

        <div class="highlight">
            <pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led5&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span> 
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;random&#39;</span><span class="p">,</span> 
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#ed1978&#39;</span><span class="p">,</span> 
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#fff&#39;</span><span class="p">,</span> 
    <span class="nx">size</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span> 
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">9</span><span class="p">,</span> 
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">3</span> 
<span class="p">});</span> 
</code></pre>
        </div>

        <p>自定义字母</p>

        <div class="led6"></div>

        <div class="highlight">
            <pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led6&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span> 
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;custom&#39;</span><span class="p">,</span> 
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#FF0000&#39;</span><span class="p">,</span> 
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#BCBABA&#39;</span><span class="p">,</span> 
    <span class="nx">size</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span> 
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> 
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">4</span> 
    <span class="nx">value</span><span class="o">:</span> <span class="mi">&#39;ABCDEFG&#39;  //only ABCDEFGHIJKLMNOPQRSTUVWXYZ@</span> 
<span class="p">});</span> 
</code></pre>
        </div>
    </div>

    <script src="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/js/raphael.js"></script>
    <script type="text/javascript" src="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/js/jquery-led.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.led1').catLED({
                type: 'countdown',
                format: 'ddd:hh:mm:ss',
                hour_format: 12,
                color: '#fa0',
                background_color: '#fafafa',
                rounded: 0,
                font_type: 2,
                size: 9
            });
            $('.led2').catLED({
                type: 'time',
                format: 'hh:mm',
                color: '#ed1978',
                background_color: '#ccc',
                size: 8,
                rounded: 4,
                font_type: 1
            });
            $('.led3').catLED({
                type: 'countdown',
                format: 'ddd:hh:mm:ss',
                count_to: '2017:12:25',
                color: '#ff0000',
                background_color: '#fff',
                size: 8,
                font_type: 2
            });
            $('.led4').catLED({
                type: 'countdown',
                format: 'ddd:hh',
                color: '#0000ff',
                background_color: '#888',
                size: 10,
                font_type: 2,
                rounded: 6
            });
            $('.led5').catLED({
                type: 'random',
                color: '#ed1978',
                background_color: '#fff',
                size: 6,
                rounded: 9,
                font_type: 3
            });
            $('.led6').catLED({
                type: 'custom',
                color: '#FF0000',
                background_color: '#BCBABA',
                size: 10,
                rounded: 2,
                font_type: 4,
                value: 'ABCDEFG'
            });
        });
    </script>

</body>

</html>